<!--
    * Time    : 2020-12-23 13:39:04
    * Author  : zhangTj
    * Desc    : 地图搜索地点
-->

<template>
    <div class="w750" :style="{ '--themescolor': themes.color }">
        <div class="d-flex flex-column h-100">
            <div class="border-bottom">
                <van-search v-model="searchText" @input="onSearch" @search="onSearch" show-action placeholder="请输入搜索关键词">
                    <template #action>
                        <div @click="onSearch">搜索</div>
                    </template>
                </van-search>
            </div>
            <div class="p-1 flex-1 bg-fff overflow-y">
                <van-list
                    v-if="list && list.length"
                    v-model="loading"
                    :finished="finished"
                    :immediate-check="false"
                    finished-text="没有更多了"
                    @load="loadMore"
                >
                    <div
                        @click="selectItem(item)"
                        v-for="(item, index) in list"
                        :key="index"
                        class="d-flex font-16 border-bottom mb-1 pb-1 cursor-pointer"
                    >
                        <div class="mr">
                            <span class="iconfont iconlocation"></span>
                        </div>
                        <div class="flex-1" style="width: 200px">
                            <div class="line-clamp1">{{ item.name }}</div>
                            <div class="font-12 text-999 mt line-clamp1">{{ item.address }}</div>
                        </div>
                    </div>
                </van-list>
                <Noempty :pic="require('@/assets/images/review.png')" :title="'暂无搜索结果'" v-else />
            </div>
        </div>
    </div>
</template>

<script>
import { mapState } from 'vuex'
import { placeSearchFunc } from '@/utils/mapUtils'
import Noempty from 'components/Noempty/Noempty'

export default {
    name: '',
    components: { Noempty },
    data() {
        return {
            searchText: '',
            loading: false,
            finished: false,
            list: [],
            pageIndex: 1, // 页码
            pageSize: 10, // 页数
            total: 0, // 总数量
            placeSearch: ''
        }
    },
    computed: {
        ...mapState(['themes'])
    },
    watch: {},
    created() {},
    destroyed() {},
    mounted() {
        this.placeSearch = placeSearchFunc()
    },
    methods: {
        // 获取列表数据
        getList() {
            this.placeSearch.search(this.searchText, (status, result) => {
                if (status === 'complete' && result.info === 'OK') {
                    if (this.list.length == 0) {
                        this.list = result.poiList.pois
                        this.activeItem = this.list[0]
                    } else {
                        this.list.push(...result.poiList.pois)
                    }
                    this.total = result.poiList.count
                    this.pageIndex = result.poiList.pageIndex
                    this.loading = false
                }
            })
        },

        // 加载更多
        loadMore() {
            this.pageIndex++
            this.placeSearch.setPageIndex(this.pageIndex)
            this.getList()
            // 数据全部加载完成
            if (this.list.length >= this.total) {
                this.finished = true
            }
        },

        // 搜索
        onSearch() {
            this.list = []
            this.getList()
        },

        // 选择地点
        selectItem(item) {
            sessionStorage.setItem('selectPlace', JSON.stringify(item))
            this.$router.back()
        }
    }
}
</script>

<style scoped></style>
